<template>
  <view class="data-card" :class="cardClass" @click="handleClick">
    <view class="card-icon" v-if="icon">
      <uni-icons :type="icon" :size="iconSize" :color="iconColor"></uni-icons>
    </view>
    <view class="card-content">
      <view class="card-value">{{ formattedValue }}</view>
      <view class="card-label">{{ label }}</view>
      <view class="card-trend" v-if="trend">
        <uni-icons
          :type="trend.type === 'up' ? 'up' : 'down'"
          :size="12"
          :color="trend.type === 'up' ? '#51cf66' : '#ff6b6b'"
        ></uni-icons>
        <text
          class="trend-text"
          :style="{ color: trend.type === 'up' ? '#51cf66' : '#ff6b6b' }"
        >
          {{ trend.value }}%
        </text>
      </view>
    </view>
    <view class="card-decoration" v-if="showDecoration"></view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from "vue";

interface TrendData {
  type: "up" | "down";
  value: number;
}

interface Props {
  value: number | string;
  label: string;
  icon?: string;
  iconSize?: number;
  iconColor?: string;
  theme?: "primary" | "success" | "warning" | "danger" | "info";
  size?: "small" | "medium" | "large";
  trend?: TrendData;
  showDecoration?: boolean;
  clickable?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  iconSize: 24,
  iconColor: "#ffffff",
  theme: "primary",
  size: "medium",
  showDecoration: true,
  clickable: false,
});

const emit = defineEmits<{
  click: [];
}>();

// 格式化数值
const formattedValue = computed(() => {
  if (typeof props.value === "number") {
    return props.value.toLocaleString();
  }
  return props.value;
});

// 卡片样式类
const cardClass = computed(() => {
  return [
    `card-${props.theme}`,
    `card-${props.size}`,
    {
      "card-clickable": props.clickable,
    },
  ];
});

// 处理点击事件
const handleClick = () => {
  if (props.clickable) {
    emit("click");
  }
};
</script>

<style lang="scss" scoped>
.data-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;

  &.card-clickable {
    cursor: pointer;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .card-content {
    flex: 1;
    min-width: 0;

    .card-value {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .card-label {
      font-size: 12px;
      color: #666;
      font-weight: 500;
    }

    .card-trend {
      display: flex;
      align-items: center;
      gap: 3px;

      .trend-text {
        font-size: 10px;
        font-weight: 600;
      }
    }
  }

  .card-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.1;
    transform: translate(15px, -15px);
  }

  // 主题样式
  &.card-primary {
    .card-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .card-decoration {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
  }

  &.card-success {
    .card-icon {
      background: linear-gradient(135deg, #51cf66 0%, #69db7c 100%);
    }

    .card-decoration {
      background: linear-gradient(135deg, #51cf66 0%, #69db7c 100%);
    }
  }

  &.card-warning {
    .card-icon {
      background: linear-gradient(135deg, #ffa726 0%, #ffcc02 100%);
    }

    .card-decoration {
      background: linear-gradient(135deg, #ffa726 0%, #ffcc02 100%);
    }
  }

  &.card-danger {
    .card-icon {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
    }

    .card-decoration {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
    }
  }

  &.card-info {
    .card-icon {
      background: linear-gradient(135deg, #339af0 0%, #74c0fc 100%);
    }

    .card-decoration {
      background: linear-gradient(135deg, #339af0 0%, #74c0fc 100%);
    }
  }

  // 尺寸样式
  &.card-small {
    padding: 12px;
    gap: 10px;

    .card-icon {
      width: 32px;
      height: 32px;
    }

    .card-content {
      .card-value {
        font-size: 16px;
      }

      .card-label {
        font-size: 10px;
      }
    }
  }

  &.card-large {
    padding: 18px;
    gap: 14px;

    .card-icon {
      width: 48px;
      height: 48px;
    }

    .card-content {
      .card-value {
        font-size: 24px;
      }

      .card-label {
        font-size: 14px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 600px) {
  .data-card {
    padding: 12px !important;
    gap: 10px !important;

    .card-icon {
      width: 32px !important;
      height: 32px !important;
    }

    .card-content {
      .card-value {
        font-size: 16px !important;
      }

      .card-label {
        font-size: 10px !important;
      }

      .card-trend {
        gap: 2px !important;

        .trend-text {
          font-size: 9px !important;
        }
      }
    }
  }
}
</style>
